<!-- 交易退款界面  扫码退款 刷卡退款 -->
<template>
	<view>
		<u-navbar title="结算明细" class="nav" :placeholder="true"
			:fixed="true"
			:safeAreaInsetTop="true">
			<view slot="left">
				<u-icon name="arrow-left" size="12" @click="onClickBack"></u-icon>
			</view>
			
		</u-navbar>
		<view class="margin-top padding bg-white" style="display: flex;"> 
		
			<picker  class="border_1" style=" padding: 9px 60upx;width: 300upx;margin-left: -10upx;" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="uni-input">{{date}}</view>
			</picker>

		
			<text class="text-grey" style="margin-left: 40upx; transform: translateY(20%);">至</text>
			
			<picker  class="border_1" style="margin-left: 40upx; padding: 9px 60upx; width: 300upx;" mode="date" :value="date1" :start="startDate1" :end="endDate1" @change="bindDateChange1">
				<view class="uni-input">{{date1}}</view>
			</picker>
		</view>

		<scroll-view class="border_1">
			<view class="cu-style2" :class="index==TabCur?'bg-gradual-blue':''" v-for="(item,index) in type"
				:key="index" @tap="tabSelect" :data-id="index">
				{{item.name}}
			</view>
		</scroll-view>


		
		<view class="bg-white">
			<view class="" v-if="orderList.length>0">
				<view class="cu-list menu-avatar">
					<view class="cu-item grayscale" v-for="(item,index) in orderList" :key="index">
						<view class="cu-avatar radius lg bg-blue" v-if="item.pay_type=='30'">刷</view>
						<view class="cu-avatar radius lg bg-blue" v-else>扫</view>
						<view class="content">
							<view><view class="text-cut">{{item.order_id}}</view>
							</view>
							<view class="text-gray text-sm flex"> <view class="text-cut">{{item.createtime}}</view></view>
						</view>
						<view class="action">
							<view class="main-color text-xl">
								{{item.order_amount}}
							</view>
							
						</view>
					</view>
				</view>
			</view>
			<view class="tc padding-tb-xxl" v-else>
				<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" text="暂无数据"></u-empty>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-loadmore :status="status" class="w-pb-10" v-if="orderList.length >= 10"/>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			const currentDate1 = this.getDate1({
				format: true
			})
			return {
				TabCur: -1,
				orderList: [],
				date: currentDate,
				date1: currentDate1,
				type: [{
						name: "近一周"
					},
					{
						name: "近一月"
					},
					{
						name: "近三月"
					}
				],
				status: 'loadmore',
				page: 1,
				closeRequest: false
			}
		},
		onLoad(option) {
			this.TabCur = option.TabCur;
			if (this.TabCur==0) {
				this.getNowData();
				this.date = this.getCycle((new Date(new Date().toLocaleDateString())/1000 - 7 * 24 * 60 * 60)*1000);
			} else if (this.TabCur==1) {
				this.getNowData();
				this.date = this.getCycle((new Date(new Date().toLocaleDateString())/1000 - 30 * 24 * 60 * 60)*1000);
			} else if (this.TabCur==2) {
				this.getNowData();
				this.date = this.getCycle((new Date(new Date().toLocaleDateString())/1000 - 3 * 30 * 24 * 60 * 60)*1000);
			}
			this.getInfo(1);
		},
		onReachBottom () {
			if (this.orderList.length >= 10) {
				this.status = 'loading';
				this.page = ++ this.page;
				setTimeout(() => {
					this.getInfo(this.page)
					if (this.closeRequest) this.status = 'nomore';
					else this.status = 'loading';
				}, 1500)
				
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			startDate1() {
				return this.getDate1('start');
			},
			endDate() {
				return this.getDate('end');
			},
			endDate1() {
				return this.getDate1('end');
			}
		},
		
		methods: {
			// 返回页面
			onClickBack () {
				uni.navigateBack()
			},
			gotohelps() {
				uni.navigateTo({
					url: "/pages/order/helps"
				})
			},
			gotoorder() {
				uni.switchTab({
					url: "/pages/order/order"
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.closeRequest = false
				this.orderList = []
				this.page = 1
				if (this.TabCur==0) {
					this.getNowData();
					this.date = this.getCycle((new Date(new Date().toLocaleDateString())/1000 - 7 * 24 * 60 * 60)*1000);
				} else if (this.TabCur==1) {
					this.getNowData();
					this.date = this.getCycle((new Date(new Date().toLocaleDateString())/1000 - 30 * 24 * 60 * 60)*1000);
				} else if (this.TabCur==2) {
					this.getNowData();
					this.date = this.getCycle((new Date(new Date().toLocaleDateString())/1000 - 3 * 30 * 24 * 60 * 60)*1000);
				}
				this.getInfo(1);
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			bindDateChange: function(e) {
			    this.date = e.target.value;
				this.TabCur = -1;
				this.getInfo(1);
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange1: function(e) {
			    this.date1 = e.target.value;
				this.getInfo(1);
			},
			getDate1(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getNowData(){
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				this.date1 = `${year}-${month}-${day}`;
			},
			getCycle(e){
				const datee = new Date(e);
				let year = datee.getFullYear();
				let month = datee.getMonth() + 1;
				let day = datee.getDate();
				return year+'-'+month+'-'+day;
			},
			async getInfo(page) {				
				if (this.closeRequest) {
					this.$refs.uToast.show({
						type: 'default',
						title: '默认主题',
						message: "没有更多了",
					})
					this.status = 'nomore'
					return
				}
				let params = {
					s_time: new Date(this.date).getTime()/ 1000,
					e_time:new Date(this.date1).getTime()/ 1000 + 60 * 60 * 24,
					pn: page,
					page_size: 10
				}
				let pay_type = '?pay_type[0]=1&pay_type[1]=10&pay_type[2]=20&pay_type[3]=30&pay_type[4]=40&order_status[0]=0&order_status[1]=20&order_status[2]=40'
				const res = await this.$API({url: '/api/order/order_list'+pay_type,method:"GET", data: params})
				if (res.code === 1) {
					if (res.data.rows.length > 0) {
						for (let item of res.data.rows) {
							this.orderList.push(item)
						}
						this.status = 'loadmore'
					} else {
						if (page > 1) {
							this.status = 'nomore'
							this.$refs.uToast.show({
								type: 'default',
								title: '默认主题',
								message: "没有更多了",
							})
							this.closeRequest = true
						}
						
					}
				}
				
			}
		},



	}
</script>

<style>
	page {background-color: #efefef;}

	.border_1 {
		/* 日期 */
		margin-left: 0upx;
		/* position: relative; */
		padding: 20upx;
		/* text-align: center; */
		border: 1px solid #f0f0f0;
		background-color: #f0f0f0;
		/* 字体 */
		font-size: 30upx;
		color: #939293;

	}

	.cu-style2 {

		margin-left: 20upx;
		float: left;
		/* margin: auto; */
		margin-top: 10upx;
		margin-bottom: 10upx;
		width: 18%;
		border: 1px solid #f0f0f0;
		padding: 3px;
		background-color: #ffffff;
		border-radius: 45px;
		/* color: #C1C0C1; */
	}

	.border_1 {
		/* 日期 */
		margin-left: 0upx;
		position: relative;
		padding: 20upx;
		text-align: center;
		border: 1px solid #f0f0f0;
		background-color: #f0f0f0;
		/* 字体 */
		font-size: 30upx;
		/* color: #939293; */
	}
	.cu-list.grid>.cu-item image {width:50upx;height:50upx;vertical-align:middle;}
	.cu-list.grid>.cu-item uni-text {font-size:30upx;line-height:30upx;}
	
	.cu-list.grid>.cu-item:after {border-right: none;}
	.cu-avatar {
		background-color: #1678ff;
	}
	.cu-list.menu-avatar>.cu-item .action {
		width: auto;
	}
</style>
